<!doctype html>
<html>
<head>
<title>Rich Text Editor</title>
<script type="text/javascript">
var oDoc, sDefTxt;

function initDoc() {
  oDoc = document.getElementById("textBox");
  sDefTxt = oDoc.innerHTML;
  if (document.compForm.switchMode.checked) { setDocMode(true); }
}

function formatDoc(sCmd, sValue) {
  if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
}

function validateMode() {
  if (!document.compForm.switchMode.checked) { return true ; }
  alert("Uncheck \"Show HTML\".");
  oDoc.focus();
  return false;
}

function setDocMode(bToSource) {
  var oContent;
  if (bToSource) {
    oContent = document.createTextNode(oDoc.innerHTML);
    oDoc.innerHTML = "";
    var oPre = document.createElement("pre");
    oDoc.contentEditable = false;
    oPre.id = "sourceText";
    oPre.contentEditable = true;
    oPre.appendChild(oContent);
    oDoc.appendChild(oPre);
  } else {
    if (document.all) {
      oDoc.innerHTML = oDoc.innerText;
    } else {
      oContent = document.createRange();
      oContent.selectNodeContents(oDoc.firstChild);
      oDoc.innerHTML = oContent.toString();
    }
    oDoc.contentEditable = true;
  }
  oDoc.focus();
}

function printDoc() {
  if (!validateMode()) { return; }
  var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
  oPrntWin.document.open();
  oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
  oPrntWin.document.close();
}
</script>
<style type="text/css">
.intLink {
	cursor: pointer;
}

img.intLink {
	border: 0;
}

#toolBar1 select {
	font-size: 10px;
}

#textBox {
	width: 540px;
	height: 200px;
	border: 1px #000000 solid;
	padding: 12px;
	overflow: scroll;
}

#textBox #sourceText {
	padding: 0;
	margin: 0;
	min-width: 498px;
	min-height: 200px;
}

#editMode label {
	cursor: pointer;
}
</style>
</head>
<body onload="initDoc();">
	<form name="compForm" method="post" action="sample.php"
		onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;}">
		<input type="hidden" name="myDoc">
		<div id="toolBar1">
			<select
				onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
				<option selected>- formatting -</option>
				<option value="h1">Title 1 &lt;h1&gt;</option>
				<option value="h2">Title 2 &lt;h2&gt;</option>
				<option value="h3">Title 3 &lt;h3&gt;</option>
				<option value="h4">Title 4 &lt;h4&gt;</option>
				<option value="h5">Title 5 &lt;h5&gt;</option>
				<option value="h6">Subtitle &lt;h6&gt;</option>
				<option value="p">Paragraph &lt;p&gt;</option>
				<option value="pre">Preformatted &lt;pre&gt;</option>
			</select> <select
				onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
				<option class="heading" selected>- font -</option>
				<option>Arial</option>
				<option>Arial Black</option>
				<option>Courier New</option>
				<option>Times New Roman</option>
			</select> <select
				onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
				<option class="heading" selected>- size -</option>
				<option value="1">Very small</option>
				<option value="2">A bit small</option>
				<option value="3">Normal</option>
				<option value="4">Medium-large</option>
				<option value="5">Big</option>
				<option value="6">Very big</option>
				<option value="7">Maximum</option>
			</select> <select
				onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
				<option class="heading" selected>- color -</option>
				<option value="red">Red</option>
				<option value="blue">Blue</option>
				<option value="green">Green</option>
				<option value="black">Black</option>
			</select> <select
				onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
				<option class="heading" selected>- background -</option>
				<option value="red">Red</option>
				<option value="green">Green</option>
				<option value="black">Black</option>
			</select>
		</div>
		<div id="toolBar2">
			<img class="intLink" title="Clean"
				onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};"
				src="" />
			<img class="intLink" title="Print" onclick="printDoc();"
				src=""><img
				class="intLink" title="Undo" onclick="formatDoc('undo');"
				src="" />
			<img class="intLink" title="Redo" onclick="formatDoc('redo');"
				src="" />
			<img class="intLink" title="Remove formatting"
				onclick="formatDoc('removeFormat')"
				src=""><img
				class="intLink" title="Bold" onclick="formatDoc('bold');"
				src="" />
			<img class="intLink" title="Italic" onclick="formatDoc('italic');"
				src="" />
			<img class="intLink" title="Underline"
				onclick="formatDoc('underline');"
				src="" />
			<img class="intLink" title="Left align"
				onclick="formatDoc('justifyleft');"
				src="" />
			<img class="intLink" title="Center align"
				onclick="formatDoc('justifycenter');"
				src="" />
			<img class="intLink" title="Right align"
				onclick="formatDoc('justifyright');"
				src="" />
			<img class="intLink" title="Numbered list"
				onclick="formatDoc('insertorderedlist');"
				src="" />
			<img class="intLink" title="Dotted list"
				onclick="formatDoc('insertunorderedlist');"
				src="" />
			<img class="intLink" title="Quote"
				onclick="formatDoc('formatblock','blockquote');"
				src="" />
			<img class="intLink" title="Add indentation"
				onclick="formatDoc('outdent');"
				src="" />
			<img class="intLink" title="Delete indentation"
				onclick="formatDoc('indent');"
				src="" />
			<img class="intLink" title="Hyperlink"
				onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}"
				src="" />
			<img class="intLink" title="Cut" onclick="formatDoc('cut');"
				src="" />
			<img class="intLink" title="Copy" onclick="formatDoc('copy');"
				src="" />
			<img class="intLink" title="Paste" onclick="formatDoc('paste');"
				src="" />
		</div>
		<div id="textBox" contenteditable="true">
			<p>Lorem ipsum</p>
		</div>
		<p id="editMode">
			<input type="checkbox" name="switchMode" id="switchBox"
				onchange="setDocMode(this.checked);" /> <label for="switchBox">Show
				HTML</label>
		</p>
		<p>
			<input type="submit" value="Send" />
		</p>
	</form>
</body>
</html>